<template>
	<view>
		<view class="portrait">
			<u-avatar class="avatarurl" size="150" mode="square" :src="avatarUrl">
				<!-- <open-data type="userAvatarUrl"></open-data> -->
			</u-avatar>
		</view>
		<view class="username">
			<u-button class="loginButton" :ripple="true" ripple-bg-color="#d55500" :custom-style="customStyle"
				@click="testWx()">微信用户一键登录</u-button>
			<!-- <open-data type="userNickName"></open-data> -->
		</view>
		<view class="protocol" id="protocol">
			<u-checkbox v-model="checked" shape="circle" @change="isagree"></u-checkbox>
			登录代表你同意<view class="protocol-C" @click="looprotocol()">农营C隐私协议</view>
		</view>
		<!-- <sign></sign> -->
	</view>
</template>

<script>
	// import sign from '../components/sign/signwx.vue'
	export default {
		// components:{
		// 	sign
		// },
		data() {
			return {
				avatarUrl: 'http://img.chengdashi.cn/img/%E8%B5%84%E6%BA%90%201ldpi.png',
				skey: '',
				checked: false,
				wxCode: '',
				customStyle: {
					'border': '0',
					'background': '#fc6600',
					'color': '#FFFFFF'
				}
			}
		},
		methods: {
			isagree(e) {
				this.checked = e.value
				// console.log(e)
			},
			//页面跳转
			goindex() {
				// console.log('test');
				uni.switchTab({
					url: '../index/index',
					animationDuration: 1000
				})
			},
			looprotocol() {
				uni.navigateTo({
					url: '../subpages/protocol/protocol',
					animationType: 'slide-in-right',
					animationDuration: 1000
				})
				// console.log('123123')
				// uni.downloadFile({
				//   url: 'http://www.zhaojiuyi.top/pdf/%E7%94%A8%E6%88%B7%E5%8D%8F%E8%AE%AE%E5%8F%8A%E9%9A%90%E7%A7%81%E5%A3%B0%E6%98%8E.docx',
				//   success: function (res) {
				//     var filePath = res.tempFilePath;
				//     uni.openDocument({
				//       filePath: filePath,
				//       showMenu: true,
				//       success: function (res) {
				//         console.log('打开文档成功');
				//       }
				//     });
				//   }
				// });
			},
			clear() { //清理缓存
				// console.log('清理缓存');
				try {
					uni.clearStorageSync();
				} catch (e) {
					// error
				}
			},
			async testWx() {
				let that = this
				uni.login({
					success(res) {
						if (res.code) {
							that.wxCode = res.code;
							// console.log(res)
							that.$myRequest({
								url:'/wechatSession',
								method: 'POST',
								data: {
									code:that.wxCode
								}
							})
						} else {
							that.$msg('登录失败：' + res.errMsg);
						}
					},
					fail(err) {
						that.$msg('code获取失败');
					},
				});

			},
			async getUserProfile() {
				if (!this.checked) {
					uni.showToast({
						title: '请阅读并勾选用户协议',
						icon: 'error',
						duration: 1000
					})
					document.getElementById('protocol').className = 'protocol vibrate-1';
					setTimeout(() => {
						document.getElementById('protocol').className = 'protocol'
					}, 300)
					return 0;
				}
				let user_code = '';
				await uni.login({
					provider: 'weixin',
					success: (res) => {
						// console.log(res.code);
						user_code = res.code;
					}
				});
				await uni.getUserProfile({
					desc: '登录',
					lang: "zh_CN",
					success: (res) => {
						let userdata = JSON.parse(res.rawData);
						getApp().globalData.nickName = userdata.nickName;
						getApp().globalData.avatarUrl = userdata.avatarUrl;
						this.$myRequest({
							method: 'POST',
							url: '/wx/login',
							header: {
								'content-type': 'application/x-www-form-urlencoded'
							},
							data: {
								code: user_code, //临时登录凭证
								rawData: res.rawData, //用户非敏感信息
								signature: res.signature, //签名
								encrypteData: res.encryptedData, //用户敏感信息
								iv: res.iv //解密算法的向量
							}
						}).then((res) => {
							if (res.data.code == 200) {
								if (res.data.data) {
									try {
										// uni.clearStorageSync();
										uni.setStorageSync('skey', res.data.data);
										console.log('skey加入缓存');
										console.log(res.data.data);
									} catch (e) {
										console.log('缓存出错');
									}
								}
								// console.log('成功');
								this.goindex();
								// wx.setStorageSync('userInfo', userInfo);
								// wx.setStorageSync('skey', res.data.data);
							} else {
								console.log('服务器异常');
							}
						});
					}
				})
			}
		},
	}
</script>

<style>
	.portrait {
		width: 100vw;
		height: 40vh;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.username {
		overflow: hidden;
		display: flex;
		height: 10vh;
		justify-content: center;
		/* align-items: center; */
	}

	.loginButton {
		border: 0;
		width: 80vw;
		position: relative;
		top: 40rpx;
	}

	.protocol {
		margin-top: 30rpx;
		z-index: 999;
		display: flex;
		justify-content: center;
		font-size: 24rpx;
		color: #afafaf;
	}

	.protocol-C {
		color: #ffaa00;
	}

	.vibrate-1 {
		-webkit-animation: vibrate-1 0.3s linear both;
		animation: vibrate-1 0.3s linear both;
	}

	@-webkit-keyframes vibrate-1 {
		0% {
			-webkit-transform: translate(0);
			transform: translate(0)
		}

		20% {
			-webkit-transform: translate(-2px, 2px);
			transform: translate(-2px, 2px)
		}

		40% {
			-webkit-transform: translate(-2px, -2px);
			transform: translate(-2px, -2px)
		}

		60% {
			-webkit-transform: translate(2px, 2px);
			transform: translate(2px, 2px)
		}

		80% {
			-webkit-transform: translate(2px, -2px);
			transform: translate(2px, -2px)
		}

		100% {
			-webkit-transform: translate(0);
			transform: translate(0)
		}
	}

	@keyframes vibrate-1 {
		0% {
			-webkit-transform: translate(0);
			transform: translate(0)
		}

		20% {
			-webkit-transform: translate(-2px, 2px);
			transform: translate(-2px, 2px)
		}

		40% {
			-webkit-transform: translate(-2px, -2px);
			transform: translate(-2px, -2px)
		}

		60% {
			-webkit-transform: translate(2px, 2px);
			transform: translate(2px, 2px)
		}

		80% {
			-webkit-transform: translate(2px, -2px);
			transform: translate(2px, -2px)
		}

		100% {
			-webkit-transform: translate(0);
			transform: translate(0)
		}
	}
</style>
